<template>
    <div class="search-box">
        <van-field
            center
            clearable
            icon="search"
            :value="value"
            @keypress="enterEvent"
            @input="inputEvent"
            :placeholder="placeholder"
            @click-icon="searchButton"
        ></van-field>
    </div>
</template>

<script>
export default {
  name: 'search',
  props: {
    value: String,
    placeholder: String
  },
  methods: {
    searchButton () {
      this.$emit('search', this.value)
    },
    enterEvent () {
      if (event.keyCode === 13) {
        event.preventDefault()
        this.$emit('search', this.value)
      }
    },
    inputEvent (value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="less">
.search-box{
  width: percentage(679/750);
  border: 1px solid #F3F3F3;
  border-radius: 32px;
  margin: 0 auto;
  overflow: hidden;
  .van-cell{
    padding: 4px 37/2px;
  }
  .van-field__icon {
    margin-left: 6px;
  }
  .van-icon-search{
    color: @colorPrimary;
  }
}
</style>
